<template>
  <div>
    <vxe-table align="center" :seq-config="{ seqMethod }" :data="tableData">
      <!-- <vxe-column type="seq" title="序号" width="60" /> -->
      <vxe-column field="indexId" title="序号" width="60" />
      <vxe-column field="bar_code" title="条形码">
        <template #default="{ row }">
          <a-space>
            <a @click="optAction(row, 'look')">{{ row.bar_code }}</a>
          </a-space>
        </template>
      </vxe-column>
      <vxe-column field="name" title="货品名称" />
      <vxe-column field="num" title="数量" />
      <vxe-column title="操作" width="100" fixed="right" v-if="show">
        <template #default="{ row }">
          <a-space>
            <!-- <a @click="optAction(row, 'look')">查看</a> -->
            <a @click="optAction(row, 'del')" v-if="showDel">删除</a>
          </a-space>
        </template>
      </vxe-column>
    </vxe-table>
    <div class="margin-top-15">
      <vxe-pager
        size="mini"
        :current-page="tablePage.currentPage"
        :page-size="tablePage.pageSize"
        :total="tablePage.total"
        :layouts="[
          'PrevJump',
          'PrevPage',
          'JumpNumber',
          'NextPage',
          'NextJump',
          'FullJump',
          'Total'
        ]"
        @page-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive, unref, onMounted, watch } from 'vue';

  const emit = defineEmits(['action', 'getNext']);

  const props = defineProps({
    tableData: Object,
    total: Number,
    optShow: {
      type: Boolean,
      default: true
    },
    delShow: {
      type: Boolean,
      default: true
    }
  });
  const show = ref(true);
  const showDel = ref(true);
  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10
  });

  onMounted(() => {
    show.value = props.optShow;
    showDel.value = props.delShow;
    showDel.value = props.delShow;
    tablePage.total = props.total;
  });

  watch(
    () => [props.total, props.optShow, props.delShow],
    (newValue) => {
      tablePage.total = newValue[0];
      show.value = newValue[1];
      showDel.value = newValue[2];
    }
  );

  const optAction = (row, type) => {
    row.action = type;
    emit('action', row);
  };

  const handlePageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage;
    tablePage.pageSize = pageSize;
    emit('getNext', currentPage);
  };

  const seqMethod = ({ row, seq }) => {
    return seq + (tablePage.currentPage - 1) * tablePage.pageSize;
  };
</script>

<style></style>
